<template>
  <home-header :list="slide"></home-header>
  <div class="main">
    <home-hot v-if="hotList.record" :data="hotList"></home-hot>
    <home-place v-for="it in recommend" :data="it" :key="it.id"></home-place>
  </div>
  <common-footer></common-footer>
</template>

<script>
import { computed, onMounted, ref } from "@vue/runtime-core";
import { useStore } from "vuex";

import HomeHeader from "./components/home-header.vue";
import HomeHot from "./components/home-hot.vue";
import HomePlace from "./components/home-place.vue";
import CommonFooter from "/src/components/common-footer/index.vue";

export default {
  components: {
    HomeHeader,
    HomeHot,
    HomePlace,
    CommonFooter,
  },
  setup() {
    const store = useStore();

    const hotList = computed(
      () => store.state.home.homeData.recommend[0] || {}
    );
    const recommend = computed(() =>
      store.state.home.homeData.recommend.slice(1)
    );
    const slide = computed(() => store.state.home.homeData.banner.slide || []);
    onMounted(() => {
      store.dispatch("fetchHomeData");
    });
    return {
      hotList,
      slide,
      recommend,
    };
  },
};
</script>

<style lang="less" >
.main {
  padding: 0 78px;
  background-color: #141515;
}
.home-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px auto 16px;
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  line-height: 37px;
  .more {
    font-size: 14px;
    color: #979797;
    line-height: 20px;
    cursor: pointer;
    .more-icon {
      margin-left: 4px;
      width: 8px;
      height: 12px;
    }
  }
}
</style>